
@include('Home.head')

<style>
	.am-header-title a{
		color: #ffffff;
	}
	.am-navbar-nav a .am-navbar-label{
		font-size: 14px;
		margin-top: 6px;
	}
	.am-navbar{
		height: 60px;
	}
	.posre {
		position: relative;
	}
	#codeas {
		height: 26px;
		position: absolute;
		right: 7px;
		top: 7px;
		text-align: center;
		line-height: 28px;
		font-size: 12px;
		color: #333;
	}
	.yz-code {
		display: block;
		border-radius: 25px;
		border: 1px solid #e0e0e0;
		background: #e0e0e0;
		width: 100px;
	}
	.deepBrown {
		background: #FFFFFF;
		border: 0;
	}
</style>

<body>
<div class="container" id="app">
   @include('Home.member.header')
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="#">首页</a></li>
          <li><a href="#">积分转账</a></li>
        </ol>
    </div>
	<div class="cart-panel">
        <div class="gray-panel">
            {{--<div class="my-search-title-panel am-text-sm am-margin-bottom-sm"><i class="am-icon-lightbulb-o am-text-danger"></i> 提示：实际的运费可能因为收货地址的不同而有差异，具体以提交之后系统计算或卖家协商为准</div>--}}
            <div class="paoduct-title-panel">
               <form class="am-form am-form-inline">
                   <div class="am-form-group">
                       <label class="am-checkbox-inline">
                           <input type="radio" v-model="user.type" name="type" value="1" data-am-ucheck> 购物积分
                       </label>
                       <label class="am-checkbox-inline">
                           <input type="radio" v-model="user.type" name="type" value="2" data-am-ucheck> 奖金积分
                       </label>
                   </div>
                   <div class="am-form-group am-form-icon">
                       <i class="am-icon-mobile-phone"></i>
                       <input type="number" v-model="user.phone" v-on:blur="upperCase()" class="am-form-field am-radius" placeholder="接收人电话">
                   </div>
                   <div class="am-form-group am-form-icon">
                       <i class="am-icon-yen"></i>
                       <input type="number" v-model="user.money"  v-on:blur="moneyCase()" class="am-form-field am-radius" placeholder="转账金额必须是整数">
                   </div>
                   <div class="am-form-group am-form-icon">
                       <i class="am-icon-unlock-alt"></i>
                       <input type="password" v-model="user.password" class="am-form-field am-radius" placeholder="支付密码">
                   </div>

				   <div style="font-size: 16px;line-height: 35px;">{{Session::get('home_user')->phone}}</div>
				   <div class="am-form-group am-form-icon posre">
					   <i class="am-icon-user-ot"></i>
					   <!-- <span>{{Session::get('home_user')->name}}</span> -->
					   <input type="number" class="am-radius" v-model="user.name" placeholder="请输入验证码">
					   <input :disabled="isDisabled" @click="getCode" :class="isDisabled?'deepBrown':'yz-code'" id="codeas" value="获取验证码"/>
				   </div>

				   <div class="am-modal am-modal-no-btn err-modal" tabindex="-1" id="err-modal">
					   <div class="am-modal-dialog">
						   <div class="am-modal-hd">错误
							   <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
						   </div>
						   <div class="am-modal-bd">
							   @{{errMsg}}
						   </div>
						   <div class="am-modal-bd">
							   <button type="button" class="am-btn am-btn-danger am-round" @click='showErr()'>确认</button>
						   </div>
					   </div>
				   </div>
               
                   <input type="hidden" value="1" name="paytype" id="paytype">
                   <p class="am-text-center"><button type="button"  v-if="status == 0"  class="am-btn am-btn-danger am-radius am-btn-block" v-on:click="add()" style="border-radius: 50px;">转账 @{{ user_name }}</button></p>
                   <p class="am-text-center"><button type="button"  v-if="status == 1"  class="am-btn am-btn-danger am-radius am-btn-block"  disabled="disabled">加载中..</button></p>
               </form>
                
            </div>
        </div>
        <h3>转账记录</h3>
        <div class="withdrawals-panel">
        	<table class="am-table am-table-striped am-table-hover comm-table">
            	<thead>
                    <tr>
                        <th>积分</th>
                        <!-- <th>汇款人</th> -->
                        <th>积分类型</th>
                        <th>交易方</th>
                        <th>日期</th>
                    </tr>
                </thead>
                <tbody>
                	<tr v-for="val in deposit">
                        <td>@{{ val.money }}</td>
                       <!-- <td>@{{ val.nickname }}</td> -->
                        <td>
							<!-- @{{ val.type }} -->
						<span v-show="val.type == 2">奖励积分 </span>
						<span v-show="val.type == 1">电子积分 </span>
						<span v-show="val.type == 3">阅读积分 </span>
						</td>
                        <td>@{{ val.user_name }}</td>
                        <td>@{{ val.time }}</td>
                    </tr>
                </tbody>
            </table>
			<!-- <table class="layui-hide" id="records"></table> -->
        </div>
    </div>
    <!--底部-->
    @include('Home.foot')
</div>
</body>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '积分转账',
            user:{
                type:1,
                phone:'',
                money:'',
                password:'',
				name: '',
            },
            deposit:[],
            status:0,
            user_name:'',
            isDisabled: false,
            second: 0,
			errMsg: '',
			phone:'',
			money:'',
			password:'',
			name: ''
        },
        methods: {
            //初始化 系统管理员列表
            initialize: function () {

                $.post("/home/member/deposit", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
                    if (res.code == 1) {
                        app.deposit = res.data;
                    } else {
                        layer.msg(res.data,{icon:7});
                    }
                });
            },
            upperCase:function () {
                if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.user.phone))){
                    layer.msg('请输入正确的电话号码');
                    return false;
                }
                $.post("/home/member/deposit", {'_token': '{{csrf_token()}}',class:'estimate',user:app.user}, function (res) {
                    if (res.code) {
                        app.user_name = res.data.user_name
                    } else {
                        layer.msg(res.data,{icon:7});
                    }
                });
            },
			// moneyCase:function () {
			// 	console.log(app.user.money)
			// 	if(!(/^\+?[1-9][0-9]*$/.test((app.user.money / 100)))){
			// 	    layer.msg('请输入100的倍数');
			// 	    return false;
			// 	}
			//
			// },
            add:function () {
                var rico = this
				$.post("/home/member/deposit ", {'_token': '{{csrf_token()}}',class:'add',user:app.user}, function (res) {
				    layer.closeAll('loading');
				    if (res.code == 1) {
				        app.status = 0;
				        layer.msg(res.data,{icon: 6,time: 2000},function () {
				            app.user = [];
				            rico.initialize();
				            window.location.href="/home/member/index";
				        });
				    } else {
				        app.status = 0;
				        layer.msg(res.data,{icon:7});
				    }
				});
                // if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.user.phone))){
                //     layer.msg('请输入正确的电话号码');
                //     return false;
                // }
                // if(!(/^\+?[1-9][0-9]*$/.test((app.user.money / 100)))){
                //     layer.msg('请输入100的倍数');
                //     return false;
                // }
                // if(app.user.password == ''){
                //     layer.msg('请输入密码');
                //     return false;
                // }
				// if(app.user.name == ''){
				//     layer.msg('请输入验证码');
				//     return false;
				// }
    //             layer.confirm('确定打款给'+app.user_name+'吗？', {
    //                 btn: ['确定','取消'] //按钮
    //             }, 
				// function(){
    //                 app.status = 1;
    //                 layer.msg('加载中', {
    //                     icon: 16
    //                     ,time:50000
    //                     ,shade: 0.01
    //                 });
    //                 $.post("/home/member/exchange", {'_token': '{{csrf_token()}}',
				// 	type:app.user.type,
				// 	money:app.user.money,
				// 	password:app.user.password,
				// 	}, function (res) {
    //                     layer.closeAll('loading');
    //                     if (res.code) {
    //                         app.status = 0;
    //                         layer.msg(res.data,{icon: 6,time: 2000},function () {
    //                             app.user = [];
    //                             rico.initialize();
    //                             window.location.href="";
    //                         });
    //                     } else {
    //                         app.status = 0;
    //                         layer.msg(res.data,{icon:7});
    //                     }
    //                 });
    //             })
            },
			showErr: function () {
			  $('#err-modal').modal('toggle');
			},
			getCode: function (){
				let that = this;
				that.isDisabled = true;
				var second = 60;
				var codsas =  $('#codeas')
				
				codsas.attr("disabled", true);
				codsas.css("opacity", "0.8");
				var set = setInterval(function () {
					$('#codeas').val("(" + --second + "秒)后重新发送");
				},1000);
				app.codeGet();
				setTimeout(function () {
				  $('#codeas').attr("disabled", false).val("重新发送");
				  clearInterval(set);
				}, 60000);
			},
			codeGet: function () {
				var userIphon = '{{Session::get('home_user')->phone}}'
				$.post('/home/member/yzx',{'_token':'{{csrf_token()}}', name: userIphon}, function (res) {
					if (res.code = 1) {
						layer.msg(res.data, {
						    icon: 1
						    ,time: 1000
						    ,shade: 0.01
						});
					} else {
					  layer.msg(res.data, {
					      icon: 2
					      ,time: 1000
					      ,shade: 0.01
					  });
					}
					return false;
				});
			}
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
